<template>
  <div class="mcConfig">
    <el-form
      ref="baseFormRef"
      :model="baseForm"
      :rules="rules"
      label-width="100px"
    >
      <el-row :gutter="20" style="margin-top: 15px">
        <el-col :span="24">
          <el-form-item label="敏感词">
            <el-tag
              :key="tag"
              v-for="tag in mcSensitive"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput"
              >+ 添加</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "McConfigSensitiveSetting",
  props: {
    words: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      btnLoading: false,
      mcSensitive: this.words,
      baseForm: {},
      rules: {},
      inputVisible: false,
      inputValue: "",
    };
  },
  watch: {
    words() {
      this.mcSensitive = this.words;
    },
  },
  computed: {},
  methods: {
    handleClose(tag) {
      this.mcSensitive.splice(this.mcSensitive.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.mcSensitive.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.mcConfig {
  padding: 0;

  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
}
</style>
